<template>
  <div class="">
    <div class="table">
      <div class="title">{{title}}</div>
      <div class="form">
        <CommonForm :tableForm="tableForm" />
        <CommonTable :plainOptions='plainOptions' :columnList="columnList" :tableList="tableList" ref="table" />
      </div>
      <div class="btn">
        <a-button class="submit" @click="submit">提交</a-button>
        <a-button @click="resetClick">重置</a-button>
      </div>
    </div>
  </div>
</template>

<script>
import { overseaFakeData } from '../config.js'
import CommonForm from '@/components/commonForm'
import CommonTable from '@/components/commonTable'
import { trademarkApply } from '@/api/protectionOfRights'
import FrontMixins from '@/mixins/frontMixin'

export default {
  mixins: [FrontMixins],
  data () {
    return {
      overseaFakeData,
      title:'佛山市知识产权保护商标监测预警需求表',
      tableForm: [
        [
          { span: 5, label: '企业名称' },
          { span: 19, value: '', props: 'applicant', label: '企业名称' }
        ],
        [
          { span: 5, label: '分管领导' },
          { span: 7, value: '', props: 'leader', label: '分管领导' },
          { span: 5, label: '联系方式' },
          { span: 7, value: '', props: 'leaderContact', label: '联系方式' },
        ],
        [
          { span: 5, label: '工作人员姓名' },
          { span: 7, value: '', props: 'worker', label: '工作人员姓名' },
          { span: 5, label: '联系方式' },
          { span: 7, value: '', props: 'workerContact', label: '联系方式' },
        ],
      ],
      plainOptions: [
        { label: '抢注', value: '0' },
        { label: '撤销', value: '1' },
        { label: '无效', value: '2' },
      ],
      columnList: [
        { label: '序号', span: 2 },
        { label: '商标注册号', span: 3 },
        { label: '商标所有人', span: 7 },
        { label: '商标中文', span: 5 },
        { label: '商标英文', span: 3 },
        { label: '监测需求', span: 4 },
      ],
      tableList: [],
      tableFormCopy: [],
      tableListCopy: []
    }
  },
  components: {
    CommonForm,
    CommonTable
  },
  created () {
    this.tableFormCopy = JSON.parse(JSON.stringify(this.tableForm))
    this.initTable()
  },
  methods: {
    initTable () {
      let tableList = []
      for (let i = 0; i < 8; i++) {
        let arr = [
          { props: 'index', type: 'span', value: 0, span: 2 },
          { props: 'trademarkCode', type: 'input', value: '', span: 3 },
          { props: 'owner', type: 'input', value: '', span: 7 },
          { props: 'tradermark', type: 'input', value: '', span: 5 },
          { props: 'trademarkEn', type: 'input', value: '', span: 3 },
          { props: 'monitorType', type: 'checkbox', value: [], span: 4 },
        ]
        tableList.push(arr)
        this.tableList = tableList
      }
      this.tableListCopy = JSON.parse(JSON.stringify(this.tableList))
    },
    resetClick () {
      this.tableForm = JSON.parse(JSON.stringify(this.tableFormCopy))
      this.tableList = JSON.parse(JSON.stringify(this.tableListCopy))
    },
    submit () {
      if (this.authorityManagement()) {
        return
      }
      let isRequired = true
      let checkForm = [
        { props: 'leaderContact', checkRules: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/, message: '请填写正确的分管领导联系方式!' },
        { props: 'workerContact', checkRules: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/, message: '请填写正确的工作人员联系方式!' },
      ]
      this.tableForm.forEach(item => {
        item.forEach(ele => {
          if (ele.props && !ele.noRequired && ele.value === '') {
            isRequired = false
          }
          checkForm.forEach(res => {
            if (res.props === ele.props) {
              if (!res.checkRules.test(ele.value)) {
                this.$message.warning(res.message)
              }
            }
          })
        })
      })

      if (!isRequired) {
        this.$message.warning('有必填或必选项没有填写或选择。')
        return
      }
      let organizeData = this.$refs.table.organizeData()
      console.log(organizeData);
      if(organizeData)
      this.$confirm({
        title: '一旦提交不可修改，请认真检查，是否确认提交；是，就提交上去；否，返回检查可继续修改表单',
        onOk: () => {
          let obj = {
            type: '0'
          }
          this.tableForm.forEach(item => {
            item.forEach(ele => {
              if (ele.props) {
                obj[`${ele.props}`] = ele.value
              }
            })
          })
          obj.trademarkDetailList = organizeData
          trademarkApply(obj).then(res => {
            let { code, msg } = res
            if (code === 200) {
              this.$message.success(`您已成功提交${this.title}业务申请`)
              this.resetClick()
            } else {
              this.$message.error(msg)
            }
          })
        },
        onCancel () {
        },
        class: 'test',
      });
    },
  }
}
</script>